<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>热门书籍</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}" media="all">
    <script type="text/javascript" src="{{ url_for('static',filename='jquery/jquery-3.5.1.min.js') }}"></script>
    <script type="text/javascript">
        //打印列表
        $(function() {
            $.ajax({
                url:"xuanBook",
                method:"get",
                success:function(result) {
                    {# json字符串改json对象 #}
                    jsonObj=JSON.parse(result);
                    var str="";
                    $.each(jsonObj,function(index,row) {
                        if(index<=5)
                            str+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"</label></li>"
                        $("#xuan").html(str);
                    });
                },
                error:function (e) {
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });

            $.ajax({
                url:"xiuBook",
                method:"get",
                success:function(result) {
                    {# json字符串改json对象 #}
                    jsonObj=JSON.parse(result);
                    var str="";
                    $.each(jsonObj,function(index,row) {
                        if(index<=5)
                            str+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"</label></li>"
                        $("#xiu").html(str);
                    });
                },
                error:function (e) {
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });

            $.ajax({
                url:"duBook",
                method:"get",
                success:function(result) {
                    {# json字符串改json对象 #}
                    jsonObj=JSON.parse(result);
                    var str="";
                    $.each(jsonObj,function(index,row) {
                        if(index<=5)
                            str+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"</label></li>"
                        $("#du").html(str);
                    });
                },
                error:function (e) {
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });

            $.ajax({
                url:"chuanBook",
                method:"get",
                success:function(result) {
                    {# json字符串改json对象 #}
                    jsonObj=JSON.parse(result);
                    var str="";
                    $.each(jsonObj,function(index,row) {
                        if(index<=5)
                            str+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"</label></li>"
                        $("#chuan").html(str);
                    });
                },
                error:function (e) {
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });

            $.ajax({
                url:"wangBook",
                method:"get",
                success:function(result) {
                    {# json字符串改json对象 #}
                    jsonObj=JSON.parse(result);
                    var str="";
                    $.each(jsonObj,function(index,row) {
                        if(index<=5)
                            str+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"</label></li>"
                        $("#wang").html(str);
                    });
                },
                error:function (e) {
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });

            $.ajax({
                url:"keBook",
                method:"get",
                success:function(result) {
                    {# json字符串改json对象 #}
                    jsonObj=JSON.parse(result);
                    var str="";
                    $.each(jsonObj,function(index,row) {
                        if(index<=5)
                            str+="<li><a href='novel?name="+row[0]+"' class='layui-font-20'>"+row[0]+"</a><label class='layui-font-14 layui-font-gray'>/"+row[1]+"</label></li>"
                        $("#ke").html(str);
                    });
                },
                error:function (e) {
                    layer.msg("连接错误", {
                        time: 3000,
                        icon: 2
                    });
                }
            });

        });
    </script>
</head>
<body>
<div class="layui-elem-quote">
热门小说
</div>
<div class="layui-carousel" id="test1">
  <div carousel-item>
    <div><img src="{{ url_for('static',filename='images/display_one.png') }}"  style="width: 1300px"height="250px"  ></div>
    <div><img src="{{ url_for('static',filename='images/display_two.png') }}"  style="width: 1300px"height="250px"></div>
    <div><img src="{{ url_for('static',filename='images/display_three.png') }}"  style="width: 1300px"height="250px"></div>
  </div>
</div>
<div class="layui-bg-gray" style="padding: 20px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">玄幻小说</div>
                <div class="layui-card-body">
                    <div class=""><img src="http://www.xbiquge.la/files/article/image/0/10/10s.jpg" alt="武炼巅峰"  width="67" height="82" /></div>
                    <dl><dt><a href="novel?name=武炼巅峰" class='layui-font-20'>武炼巅峰</a></dt><dd>    武之巅峰，是孤独，是寂寞，是漫漫求索，是高处不胜寒
                        逆境中成长，绝地里求生，不屈不饶，才能堪破武之极道。
                        凌霄阁试炼弟子兼扫地小厮杨开偶获一本无字黑书，从此踏上漫漫武道。
                    </dd></dl>
                    <div class="layui-progress">
                        <div class="layui-progress-bar" lay-percent="100%"></div>
                    </div>
                    <ul id="xuan">
                    </ul>
                    <div>
                        <button type="button" class="layui-btn layui-btn-primary layui-border-black layui-btn layui-btn-xs">
                            <a href="/bookList">更多>></a>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">修真小说</div>
                <div class="layui-card-body">
                    <div class="image"><img src="http://www.xbiquge.la/files/article/image/56/56564/56564s.jpg" alt="大奉打更人" alt="大奉打更人"  width="67" height="82" /></div>
                    <dl><dt><a href="novel?name=大奉打更人" class='layui-font-20'>大奉打更人</a></dt><dd>    这个世界，有儒；有道；有佛；有妖；有术士。    警校毕业的许七安幽幽醒来，发现自己身处牢狱之中，三日后流放边陲.....    他起初的目的只是自保，顺便在这个没有人权的社会里当个富家翁悠闲度日。    ......    多年后，许七安回...</dd></dl>
                    <div class="layui-progress">
                        <div class="layui-progress-bar" lay-percent="100%"></div>
                    </div>
                    <ul id="xiu">
                    </ul>
                    <div>
                        <button type="button" class="layui-btn layui-btn-primary layui-border-black layui-btn layui-btn-xs">
                            <a href="/bookList">更多>></a>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">都市小说</div>
                <div class="layui-card-body">
                    <div class="image"><img src="http://www.xbiquge.la/files/article/image/63/63436/63436s.jpg" alt="全职艺术家"  width="67" height="82" /></div>
                    <dl><dt><a href="novel?name=全职艺术家" class='layui-font-20'>全职艺术家</a></dt><dd>    “音乐、影视、绘画、书法、雕塑、文学……”    “你都懂？”    “略知一二。”    “都会一点的意思？”    “嗯，都会亿点的意思。”怀揣系统，靠艺术征服世界，成为各界人士顶礼膜拜的无冕之王...</dd></dl>
                    <div class="layui-progress">
                        <div class="layui-progress-bar" lay-percent="100%"></div>
                    </div>
                <ul id="du">
                </ul>
                    <div>
                        <button type="button" class="layui-btn layui-btn-primary layui-border-black layui-btn layui-btn-xs">
                            <a href="/bookList">更多>></a>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">穿越小说</div>
                <div class="layui-card-body">
                    <div class="image"><img src="http://www.xbiquge.la/files/article/image/0/885/885s.jpg" alt="赘婿"  width="67" height="82" /></div>
                    <dl><dt><a href="novel?name=赘婿" class='layui-font-20'>赘婿</a></dt><dd>    一个受够了勾心斗角、生死打拼的金融界巨头回到了古代，进入一商贾之家最没地位的赘婿身体后的休闲故事。家国天下事，本已不欲去碰的他，却又如何能避得过了。“有人曾站在金字塔高点最廉价数不清妒忌与羡艳走过了这段万人簇拥路逃不过墓碑下那孤独的长眠”——...</dd></dl>
                    <div class="layui-progress">
                        <div class="layui-progress-bar" lay-percent="100%"></div>
                    </div>
                <ul id="chuan">
                </ul>
                    <div>
                        <button type="button" class="layui-btn layui-btn-primary layui-border-black layui-btn layui-btn-xs">
                            <a href="/bookList">更多>></a>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">网游小说</div>
                <div class="layui-card-body">
                    <div class="image"><img src="http://www.xbiquge.la/files/article/image/48/48246/48246s.jpg" alt="斩月"  width="67" height="82" /></div>
                    <dl><dt><a href="novel?name=斩月" class='layui-font-20'>斩月</a></dt><dd>    《幻月》开服的第一天，降生在新手村的我发现包裹里比别人多了几个宝贝，一本修罗秘典，一本全成就手册，还有一只看不清品阶却极其神秘的古镯。    我不知道是谁塞给了我这些，我也不知道是谁发动了系统的BUG。我只知道，在我降生在这个世界的这一刻开始...</dd></dl>
                    <div class="layui-progress">
                        <div class="layui-progress-bar" lay-percent="100%"></div>
                    </div>
                <ul id="wang">
                </ul>
                    <div>
                        <button type="button" class="layui-btn layui-btn-primary layui-border-black layui-btn layui-btn-xs">
                            <a href="/bookList">更多>></a>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">科幻小说</div>
                <div class="layui-card-body">
                    <div class="image"><img src="http://www.xbiquge.la/files/article/image/45/45701/45701s.jpg" alt="第九特区"  width="67" height="82" /></div>
                    <dl><dt><a href="novel?name=第九特区" class='layui-font-20'>第九特区</a></dt><dd>    灾变过后，大地满目疮痍。粮食匮乏，资源紧俏，局势混乱……一位从待规划区杀出来的青年，背对着漫天黄沙，孤身来到九区谋生，却不曾想偶然结识三五好友，一念之差崛起于乱世，开启了一段传奇故事……2019.江湖还是那个江湖。    唯一指定微信公共账号...</dd></dl>
                    <div class="layui-progress">
                        <div class="layui-progress-bar" lay-percent="100%"></div>
                    </div>
                <ul id="ke">
                </ul>
                    <div>
                        <button type="button" class="layui-btn layui-btn-primary layui-border-black layui-btn layui-btn-xs">
                            <a href="/bookList">更多>></a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



</div>
<script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
<script src="/static/layui/layui.js"></script>
<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
      elem: '#test1',
      width: '100%', //设置容器宽度
      arrow: 'always', //始终显示箭头
      //autoplay:'true',
      interval:'2500'
  });
});
</script>
<script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</html>